<template>
	<div class="list_Pic">
		<button @click="goAdd()">添加</button>
		<el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 80%;">
			<el-table-column prop="name" label="书名" width="180">
			</el-table-column>
			<el-table-column prop="sn" label="书本序号">
			</el-table-column>
			<el-table-column prop="author" label="作者">
			</el-table-column>
			<el-table-column label="图片" min-width="100">
				<template slot-scope="scope">
					<div style="width: 140px; height: 100px;">
						<img :src="`http://127.0.0.1/api/public/showimg/${scope.row.pic}`"
							style="width: 100%;height: 100%;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="maker" label="出版社">
			</el-table-column>
			<el-table-column prop="tmake" label="出版日期">
			</el-table-column>
			<el-table-column prop="stock" label="库存">
			</el-table-column>
			<el-table-column fixed="right" label="修改" min-width="60">
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-edit"
						@click="goupdate(scope.row.id)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :page-size="page.lines" @current-change="chang" :current-page="page.pageNum"
			layout="prev,pager,next" :total="page.sumPage"></el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'ListPic',
		data() {
			return {
				book:{
				},
				books: {
					id: 0
				},
				tableData: [],
				page: {
					pageNum: 1,
					lines: 6,
					sumPage: 0
				},
			}
		},
		methods: {
			goAdd() {
				console.log(this.books);
				this.$router.push({
					path: '/PC/addShp',
					query: {
						hot: this.books
					}
				})
			},
			goupdate(id) {
				console.log(this.book);
				console.log(id);
				this.$router.push({
					path: '/PC/upPic',
					query:{
						book:id
					}
				})
			},
			show() {
				let _this = this
				this.$get("/api/adm/book/findByPage/" + this.page.pageNum + "/" + this.page.lines).then((resp) => {
					this.tableData = resp.data.data.books
					this.page.sumPage = resp.data.data.total;
					console.log(this.page.pageNum);
					console.log("一共多少页");
					console.log(this.page.sumPage);
					console.log(this.tableData);
				})
			},
			chang(type) {
				this.page.pageNum = type;
				console.log(this.page.pageNum);
				this.show();
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			}
		},
		mounted() {
			console.log("商品展示");
			console.log(this.tableData);
			console.log("每行书本数量");
			console.log(this.page.lines);
			this.$get("/api/adm/book/findByPage/" + this.page.pageNum + "/" + this.page.lines).then((resp) => {
				this.tableData = resp.data.data.books
				this.page.sumPage = resp.data.data.total;
				console.log("页数");
				console.log(this.page.pageNum);
				console.log("一共多少页");
				console.log(this.page.sumPage);
				console.log(this.tableData);
			})
		}
	}
</script>

<style scoped>
	.list_Pic {
		width: 100%;
	}
</style>